<script setup>
defineOptions({name: 'p-demo'});
const props = defineProps({
  color: {
    type: Array,
    default: ['#2e3549', 'white', '#2e3549', '#f4f5f7'],
  },
});
</script>

<template>
  <li>
    <a style="border-radius: 4px" class="clearfix full-opacity-hover" href="#">
      <div>
        <span style="width: 20%; height: 12px; border-top-left-radius: 4px; display: block; float: left;"
              :style="{'background': props.color[0]}"></span>
        <span style="width: 80%; height: 12px; border-top-left-radius: 4px; display: block; float: left;"
              :style="{'background': props.color[1]}"></span>
      </div>
      <div>
        <span style="width: 20%; height: 34px; border-top-left-radius: 4px; display: block; float: left;"
              :style="{'background': props.color[2]}"></span>
        <span style="width: 80%; height: 34px; border-top-left-radius: 4px; display: block; float: left;"
              :style="{'background': props.color[3]}"></span>
      </div>
    </a>
  </li>
</template>

<style scoped lang="less">

</style>